/**
 * 配置 unocss 工具, VScode版本应大于 1.79.0
 * see https://unocss.dev/guide/config-file
 */

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  transformerDirectives,
  transformerVariantGroup,
  transformerCompileClass,
  presetUno,
  presetTypography,
  // presetWebFonts,
} from 'unocss';

export default defineConfig({
  content: {
    pipeline: {
      exclude: ['node_modules', '.git', '.github', '.vscode', 'build', 'dist', 'public', './index.html'],
    },
  },
  shortcuts: [
    ['wh-full', 'w-full h-full'],
    ['flex-center', 'flex items-center justify-center'],
    ['btns', 'px-2 py-1 bg-blue-500 hover:bg-blue-400 text-white rounded'],
    [/^btns-(.*)$/, ([, c]) => `btns bg-${c}4:10 text-${c}5 hover:bg-${c}4:30`],
    ['@ask', 'animate-css-ask'],
  ],
  rules: [
    [/^bc-(.+)$/, ([, color]) => ({ 'border-color': `#${color}` })],
    ['card-box', { 'box-shadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017' }],
  ],
  theme: {
    // * see https://github.com/unocss/unocss/blob/main/packages/preset-wind/src/rules/animation.ts
    animation: {
      // * use animate-css-ask to the classname
      keyframes: {
        'css-ask':
          '{0%,100%{box-shadow:inset 1px 1px rgb(236, 15, 170),inset -1px -1px rgb(236, 15, 170);}50%{box-shadow:inset 10px 10px rgba(236, 15, 170, 0.5),inset -10px -10px rgba(236, 15, 170, 0.5);}}',
        wiggle: '{0%,100% {transform:rotate(-3deg)} 50% {transform:rotate(30deg)}}',
        loadingbar:
          '{ 0% { transform: translateX(0) scaleX(0); } 40% { transform: translateX(0) scaleX(1); } 100% { transform: translateX(100%) scaleX(0.5); opacity: 0; } }',
        enterScaleIn: '{ 0% { transform: scale(0); opacity: 0 } 100% { transform: scale(100%); opacity: 1 } }',
      },
      durations: {
        'css-ask': '1s',
        loadingbar: '1.5s',
        enterScaleIn: '200ms',
      },
      directions: {
        'css-ask': 'alternate',
      },
      counts: {
        'css-ask': 'infinite',
        loadingbar: 'infinite',
      },
      timingFns: {
        'css-ask': 'ease-in-out',
        loadingbar: 'linear',
        enterScaleIn: 'ease-in-out',
      },
    },
    spacing: {
      xss: '4px',
      xs: '8px',
      sm: '12px',
      base: '16px',
      lg: '24px',
      xl: '32px',
    },
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
  },
  presets: [
    // * 使用 class 方式定义主题
    presetUno({ dark: 'class' }),
    // * 预置实现元素属性原子化
    presetAttributify(),
    // * 预置UnoCSS字体排版
    presetTypography(),
  ],
  transformers: [
    // * @apply 等指令方法
    transformerDirectives(),
    // * 使用前缀组集 hover:(bg-gray-400 font-medium) font-(light mono)
    transformerVariantGroup(),
    // * 通过 :uno: 标记直接合并原子类 class=":uno: text-center sm:text-left" => class="uno-qlmcrp"
    transformerCompileClass(),
  ],
});
